<template>
    <div>
        <el-steps :active="step" finish-status="success">
            <el-step title="输入基本信息"></el-step>
            <el-step title="输入选择题目"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <!-- 试卷基本信息 -->
        <div v-show="step == 0">
            <el-form ref="paper_base_info_form" :model="paper_info" :rules="paper_base_info_rules">
                <el-form-item label="请输入试卷名" prop="paperName">
                    <el-input
                        v-model="paper_info.paperName"
                        placeholder="请输入试卷名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="请输入试卷总分" prop="paperTotal">
                    <el-input v-model="paper_info.paperTotal"></el-input>
                </el-form-item>
                <el-form-item label="请输入考试时间（分钟）" prop="examTime">
                    <el-input v-model="paper_info.examTime"></el-input>
                </el-form-item>
                <el-form-item label="请选择科目" prop="paperSubject">
                    <el-select v-model="paper_info.paperSubject" style="width: 100%">
                        <el-option label="语文" value="语文"></el-option>
                        <el-option label="数学" value="数学"></el-option>
                        <el-option label="英语" value="英语"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年级" prop="paperGrade">
                    <el-select v-model="paper_info.paperGrade" style="width: 100%;">
                        <el-option label="一年级" value="一年级"></el-option>
                        <el-option label="二年级" value="二年级"></el-option>
                        <el-option label="三年级" value="三年级"></el-option>
                        <el-option label="四年级" value="四年级"></el-option>
                        <el-option label="五年级" value="五年级"></el-option>
                        <el-option label="六年级" value="六年级"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="block" @click="first_step"
                        >下一步</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <!-- 试卷选择题目 -->
        <div v-show="step == 1">
            <el-row>
                <el-col>
                    <h4 class="text-left">选择的题目</h4>
                    <el-table ref="question_table" :data="selected_questions">
                        <el-table-column type="index"></el-table-column>
                        <el-table-column
                            prop="name"
                            label="题目"
                        ></el-table-column>
                        <el-table-column prop="type" label="题目类型">
                            <template slot-scope="scope">
                                {{ question_type[scope.row.type] }}
                            </template>
                        </el-table-column>
                        <!-- <el-table-column>
                        <template slot-scope="scope">
                            <el-button type="danger" @click="delete_question(scope.row)">删除</el-button>
                        </template>
                    </el-table-column> -->
                    </el-table>
                    <br />
                    <el-button type="primary" class="block" @click="submitPaper"
                        >下一步</el-button
                    >
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col>
                    <h4 class="text-left">题库</h4>
                    <el-form :inline="true" class="text-left">
                        <el-form-item label="年级">
                            <el-select v-model="queryForm.gradeName">
                                <el-option
                                    label="一年级"
                                    value="一年级"
                                ></el-option>
                                <el-option
                                    label="二年级"
                                    value="二年级"
                                ></el-option>
                                <el-option
                                    label="三年级"
                                    value="三年级"
                                ></el-option>
                                <el-option
                                    label="四年级"
                                    value="四年级"
                                ></el-option>
                                <el-option
                                    label="五年级"
                                    value="五年级"
                                ></el-option>
                                <el-option
                                    label="六年级"
                                    value="六年级"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="题型">
                            <el-select v-model="queryForm.type">
                                <el-option
                                    v-for="(value, key) in question_type"
                                    :key="value"
                                    :label="value"
                                    :value="key"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="get_questions"
                                >查询</el-button
                            >
                        </el-form-item>
                        <el-form-item>
                            <el-button type="warning">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                        v-loading="questions_table_loading"
                        :data="questions_data"
                        @selection-change="select_question"
                    >
                        <el-table-column type="selection"> </el-table-column>
                        <el-table-column
                            prop="name"
                            label="题目"
                        ></el-table-column>
                        <el-table-column prop="type" label="题目类型">
                            <template slot-scope="scope">
                                {{ question_type[scope.row.type] }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        layout="prev, pager, next"
                        hide-on-single-page
                        :current-page.sync="queryForm.page"
                        :page-size="queryForm.size"
                        :total="questions_total"
                        @current-change="get_questions"
                    >
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <div v-show="step == 2">
            <h1>完成</h1>
            <el-button type="primary">查看全部试卷</el-button>
            <el-button>返回制作试卷</el-button>
        </div>
    </div>
</template>
<script>
import { stem_search } from "@/api/question_bank"
import { paper_save } from "@/api/paper"

export default {
    name: "MakePaper",
    data() {
        return {
            step: 0,
            question_type: {
                SINGLE_CHOICE: "单选",
                JUDGE: "判断",
                MULTIPE_CHOICE: "多选",
            },
            queryForm: {
                gradeName: "一年级",
                subject: "语文",
                type: "SINGLE_CHOICE",
                page: 1,
                // 直接不分页
                size: 1000,
            },
            paper_base_info_rules:{
                paperName: [
                    {
                        type:'string', required: true,message: "请输入试卷名"
                    }
                ],
                paperSubject:[
                    {
                        type:'string', required: true,message: "请选择试卷的科目"
                    }
                ],
                examTime:[
                    {
                        parrern: /\d{0,}/, required: true,message: "请输入考试时间"
                    }
                ],
                paperTotal:[
                    {
                        pattern: /\d{0,}/, required: true,message: "请输入试卷的总分"
                    }
                ],
                paperGrade:[
                    {
                        type: "string", required: true,message: "请选择试卷的年级"
                    }
                ]
            },
            paper_info: {
                paperSubject: "",
                paperName: "",
                examTime: "60",
                questionIds: "",
                paperTotal: "100",
                paperGrade: "",
            },
            questions_data: [],
            questions_total: 0,
            questions_table_loading:false,
            selected_questions: [],
        };
    },
    methods: {
        first_step(){
            this.$refs['paper_base_info_form'].validate((valid)=>{
                if(valid){
                    this.get_questions();
                    this.step+=1;
                }
            })
        },
        select_question(selected) {
            // 如果是单选就添加最后一个
            this.selected_questions = Object.assign(selected);
        },
        delete_question(row) {
            this.$refs.question_table.toggleRowSelection(row);
        },
        get_questions() {
            this.questions_table_loading = true;
            stem_search(this.queryForm).then((res) => {
                this.questions_data = res.data.data.data;
                this.questions_total = res.data.data.total;
                this.questions_table_loading = false;
            }).catch((error)=>{
                console.log(error)
                this.questions_table_loading = false;
            });
        },
        submitPaper() {
            this.paper_info["paperSubject"] = this.queryForm["subject"];
            this.paper_info["paperGrade"] = this.queryForm["gradeName"];
            this.paper_info["questionIds"] = this.selected_questions
                .map((item) => {
                    return item["id"];
                })
                .join(",");
            paper_save(this.paper_info)
                .then(() => {
                    this.step += 1;
                    this.$message("操作成功");
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    },
    watch: {
        "paper_info.paperGrade": function(val){
            this.queryForm['gradeName'] = val;
        },
        "paper_info.paperSubject": function(val){
            this.queryForm['subject'] = val;
            console.log(this.queryForm['subject'])
        },
    },
    mounted() {
    },
};
</script>
<style scoped>
.el-button.block {
    width: 100%;
}
</style>